<template>
  <div class="content">
    <div class="card_header">报警设置</div>
    <div class="card_form">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="告警名称">
          <el-input v-model="formInline.user" placeholder="告警名称"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="Search" @click="onSubmit">查询</el-button>
          <el-button type="default" :icon="Refresh" @click="onSubmit">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="card_table">
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
        border
        stripe
      >
        <el-table-column label="告警名称" prop="id" align="center" width="120">
          <template #default="scope">
            <div @click="onDetail">
              {{ scope.row.id }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="类型" prop="type" align="center" width="120" />
        <el-table-column label="通知人" prop="total" align="center" />
        <el-table-column label="通知方式" prop="close_total" align="center" />
        <el-table-column label="备注" sortable prop="online_total" align="center" />

        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template #default>
            <el-button link type="primary" size="small" @click="onDetail">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="width: 30%; position: absolute; bottom: 30px; right: 80px">
        <el-pagination background layout="prev, pager, next" :total="100" />
      </div>
    </div>
    <el-dialog v-model="detailShow" title="编辑" width="900" align-center>
      <div class="card_details">
        <div class="card_box">
          <div class="card_header">告警信息</div>
          <div class="card_box_descriptions">
            <el-form :model="form" label-width="auto" style="max-width: 600px">
              <el-form-item label="告警名称">
                <el-select v-model="form.region" placeholder="告警名称">
                  <el-option label="离线" value="离线" />
                  <el-option label="离线" value="离线" />
                </el-select>
              </el-form-item>
              <el-form-item label="通知类型">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox value="短信" name="type"> 短信 </el-checkbox>
                  <el-checkbox value="微信" name="type"> 微信 </el-checkbox>
                  <el-checkbox value="系统消息" name="type"> 系统消息 </el-checkbox>
                </el-checkbox-group>
              </el-form-item>

              <el-form-item label="备注">
                <el-input v-model="form.desc" type="textarea" />
              </el-form-item>
            </el-form>
            <el-table
              :data="tableData"
              style="width: 100%"
              :default-sort="{ prop: 'date', order: 'descending' }"
              border
              stripe
            >
              <el-table-column label="告警名称" prop="id" align="center" width="120">
                <template #default="scope">
                  <div @click="onDetail">
                    {{ scope.row.id }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="类型" prop="type" align="center" width="120" />
              <el-table-column label="通知人" prop="total" align="center" />
              <el-table-column label="通知方式" prop="close_total" align="center" />
              <el-table-column label="备注" sortable prop="online_total" align="center" />

              <el-table-column fixed="right" label="操作" width="100" align="center">
                <template #default>
                  <el-button link type="primary" size="small" @click="onDetail">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="card_box">
          <div class="card_header">通知人</div>
          <div class="card_box_descriptions">
            <el-table
              :data="tableDataName"
              style="width: 100%"
              :default-sort="{ prop: 'date', order: 'descending' }"
              border
              stripe
            >
              <el-table-column label="姓名" prop="name" align="center" width="120">
              </el-table-column>
              <el-table-column label="部门" prop="dept" align="center" width="120" />
              <el-table-column label="电话号码" prop="phone" align="center" />
              <el-table-column label="备注" sortable prop="remark" align="center" />

              <el-table-column fixed="right" label="操作" width="100" align="center">
                <template #default>
                  <el-button link type="primary" size="small" @click="onDetail">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailShow = false">取消</el-button>
          <el-button type="primary" @click="detailShow = false"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ChatLineSquare, Search, Refresh, More } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";

const formInline = reactive({
  user: "",
  region: "",
  date: "",
});
const detailShow = ref(false);
const tableData = ref([
  {
    id: "离线",
    type: "设备离线报警",
    status: "1",
    total: "青澜实业，许鸿飞，胡金城，邓晴晴，业务，运维，管理员",
    online_total: "8",
    offline_total: "本告警为设备离线告警",
    close_total: "短信，微信，系统消息",
    createDate: "2025-02-06",
    communicationDate: "2025-02-06 16:34:33",
  },
]);
const tableDataName = ref([
  {
    name: "青澜实业",
    dept: "内部服务中心",
    phone: "13512345678",
    remark: "内部服务中心测试人员",
  },
  {
    name: "许鸿飞",
    dept: "内部服务中心",
    phone: "13512345678",
    remark: "内部服务中心测试人员",
  },
  {
    name: "胡金城",
    dept: "内部服务中心",
    phone: "13512345678",
    remark: "内部服务中心测试人员",
  },
  {
    name: "邓晴晴",
    dept: "内部服务中心",
    phone: "13512345678",
    remark: "内部服务中心测试人员",
  },
  {
    name: "业务",
    dept: "内部服务中心",
    phone: "13512345678",
    remark: "内部服务中心测试人员",
  },
  {
    name: "运维",
    dept: "内部服务中心",
    phone: "13512345678",
    remark: "内部服务中心测试人员",
  },
  {
    name: "管理员",
    dept: "内部服务中心",
    phone: "13512345678",
    remark: "内部服务中心测试人员",
  },
]);
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
const onDetail = () => {
  detailShow.value = !detailShow.value;
};
</script>
<style lang="less" scoped>
li {
  list-style: none;
}
.content {
  box-shadow: 0px 0px 8px rgba(0.1, 0.1, 0.1, 0.3);
  border-radius: 10px;
}
.card_header {
  background: linear-gradient(
    90deg,
    #409eff,
    rgba(44, 166, 224, 0.2),
    rgba(44, 166, 224, 0)
  );
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding: 15px 20px;
  color: #fff;
}
.card_form {
  width: 80%;
  padding: 20px 20px;
  padding-top: 40px;
  :deep(.el-form) {
    height: 45px;
  }
}
.demo-form-inline {
  .el-input {
    --el-input-width: 160px;
  }
  .el-select {
    --el-select-width: 160px;
  }
}
.card_table {
  padding: 60px 20px;
  padding-bottom: 100px;
  padding-top: 15px;

  position: relative;
}
.card_box {
  box-shadow: 0px 0px 8px rgba(0.1, 0.1, 0.1, 0.3);
  border-radius: 10px;
  margin-bottom: 25px;
}
.card_box_descriptions {
  padding: 15px;
}
.log > li {
  margin-bottom: 15px;
}
:deep(.el-table__header .el-table__cell) {
  background: #409eff !important;
  color: #fff;
}
:deep(.el-table .ascending .sort-caret.ascending) {
  border-bottom-color: #fff !important;
}
:deep(.el-table .descending .sort-caret.descending) {
  border-top-color: #fff !important;
}
:deep(.el-table__row td:first-child:hover) {
  color: #409eff;
  cursor: pointer;
}

:deep(.el-drawer__header) {
  margin-bottom: 0;
}
</style>
